/* eslint-disable no-undef */
import React, { Component } from "react";
import Axios from "axios";

class Echarts extends Component {
  componentDidMount() {
    var myChart1 = echarts.init(document.getElementById("myChart1"));
    var myChart2 = echarts.init(document.getElementById("myChart2"));
    var myChart3 = echarts.init(document.getElementById("myChart3"));
    var myChart4 = echarts.init(document.getElementById("myChart4"));
    var myChart5 = echarts.init(document.getElementById("myChart5"));
    // var myChart6 = echarts.init(document.getElementById("myChart6"));
    // var myChart7 = echarts.init(document.getElementById("myChart7"));
    // var myChart8 = echarts.init(document.getElementById("myChart8"));
    // var myChart9 = echarts.init(document.getElementById("myChart9"));
    // var myChart10 = echarts.init(document.getElementById("myChart10"));
    // var myChart11 = echarts.init(document.getElementById("myChart11"));

    myChart1.setOption({
      title: {
        text: "1.ECharts柱状图"
      },
      tooltip: {},
      xAxis: {
        data: ["9-1", "9-2", "9-3", "9-4", "9-5"]
      },
      yAxis: {},
      series: [
        {
          name: "学习时间",
          type: "bar",
          data: [5, 2, 3, 2, 1]
        }
      ]
    });
    myChart2.setOption({
      title: {
        text: "2.ECharts折线图"
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ["9-1", "9-2", "9-3", "9-4", "9-5"]
      },
      yAxis: {},
      series: [
        {
          name: "学习时间",
          type: 'line',
          data: [5, 2, 3, 2, 1]
        }
      ]
    });
    myChart3.setOption({
      backgroundColor: '#2c343c',
      title: {
        text: "3.ECharts饼图",
        left: 'center',
        top: 20,
        textStyle: {
          color: '#ccc'
        }
      },
      tooltip: {},
      series: [
        {
          name: "学习时间",
          type: 'pie',
          data: [
            { value: 10, name: '工作时间' },
            { value: 3, name: '学习时间' },
            { value: 3, name: '生活时间' },
            { value: 8, name: '睡觉时间' },
          ]
        }
      ]
    });
    myChart4.setOption({
      title: {
        text: "4.ECharts散点图",
        left: 'center',
        top: 20,
        textStyle: {
          color: '#ccc'
        }
      },
      tooltip: {},
      xAxis: {},
      yAxis: {},
      series: [
        {
          symbolSize: 80,
          name: "学习时间",
          type: 'scatter',
          data: [
            [1,1],
            [2,3],
            [3,2],
            [5,8],
            [4,4],
          ]
        }
      ]
    });
    Axios.get('/echarts/examples/data/asset/data/hangzhou-tracks.json').then(res=>{
      if(!res || !res.data){
        return;
      }
      var busLines = [].concat.apply([], res.data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
          var pt = [busLine[i], busLine[i + 1]];
          if (i > 0) {
            pt = [
              prevPt[0] + pt[0],
              prevPt[1] + pt[1]
            ];
          }
          prevPt = pt;

          points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
          coords: points
        };
      }));
      myChart5.setOption( {
        bmap: {
          center: [116.46, 39.92],
          zoom: 10,
          roam: true,
          mapStyle: {
            styleJson: [{
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'land',
              'elementType': 'all',
              'stylers': {
                'color': '#f3f3f3'
              }
            }, {
              'featureType': 'railway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'color': '#fdfdfd'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'poi',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'green',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'subway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'local',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'building',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'label',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#999999'
              }
            }]
          }
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'bmap',
          polyline: true,
          data: busLines,
          silent: true,
          lineStyle: {
            normal: {
              color: '#c23531',
              color: 'rgb(200, 35, 45)',
              opacity: 0.2,
              width: 1
            }
          },
          progressiveThreshold: 500,
          progressive: 200
        }]
      });
    })
  }
  render() {
    return (
      <div>
        <div
          id="myChart1"
          style={{
            width: 400,
            height: 400,
            margin: '0 auto'
          }}
        ></div>
        <div
          id="myChart2"
          style={{
            width: 400,
            height: 400,
            margin: '0 auto'
          }}
        ></div>
        <div
          id="myChart3"
          style={{
            width: 600,
            height: 600,
            margin: '0 auto'
          }}
        ></div>
        <div
          id="myChart4"
          style={{
            width: 600,
            height: 600,
            margin: '0 auto'
          }}
        ></div>
        <div
          id="myChart5"
          style={{
            width: 600,
            height: 600,
            margin: '0 auto'
          }}
        ></div>
        <div
          id="myChart6"
          style={{
            width: 600,
            height: 600,
            margin: '0 auto'
          }}
        ></div>
      </div>
    );
  }
}

export default Echarts;
